<script lang="ts" setup>
import {ref} from 'vue'
import {forgt, login, regrpt} from "../serve.ts"
import {ElMessage} from "element-plus"
import {useRouter} from "vue-router"

const
    //登录
    router = useRouter(),
    lF = ref(),
    lForm = ref({username: '', password: ''}),
    lRules = {
      username: [
        {
          required: true,
          min: 3,
          max: 10,
          message: '账号长度3-10位',
          trigger: 'trigger',
        },
      ],
      password: [
        {
          required: true,
          min: 3,
          max: 15,
          message: '密码长度3-15位',
          trigger: 'trigger',
        },
      ]
    },
    // 注册
    qrF = ref(),
    qrForm = ref({
      "username": "",
      "password": "",
      "subPassword":"",
      "nickname": "",
      "mail": ""
    }),
    qrRules = {
      username: [
        {
          required: true,
          min: 3,
          max: 10,
          message: '账号长度3-10位',
          trigger: 'trigger',
        },
      ],
      password: [
        {
          required: true,
          min: 3,
          max: 15,
          message: '密码长度3-15位',
          trigger: 'trigger',
        },
      ],
      subPassword: [
        {
          required: true,
          min: 3,
          max: 15,
          message: '密码长度3-15位',
          trigger: 'trigger',
        },
      ],
      nickname: [
        {
          required: true,
          min: 1,
          max: 10,
          message: '用户名称长度1-10位',
          trigger: 'trigger',
        },
      ],
      mail: [
        {
          required: true,
          min: 5,
          max: 30,
          message: '邮箱长度5-30位',
          trigger: 'trigger',
        },
      ]
    },
    //忘记密码
    fpF = ref(),
    fpForm = ref({
      "username": "",
      "mail": "",
      "password": "",
      "newPassword": ""
    }),
    fpRules = {
      username: [
        {
          required: true,
          min: 3,
          max: 10,
          message: '账号长度3-10位',
          trigger: 'trigger',
        },
      ],
      password: [
        {
          required: true,
          min: 3,
          max: 15,
          message: '密码长度3-15位',
          trigger: 'trigger',
        },
      ],
      newPassword: [
        {
          required: true,
          min: 3,
          max: 15,
          message: '密码长度3-15位',
          trigger: 'trigger',
        },
      ],
      mail: [
        {
          required: true,
          min: 5,
          max: 30,
          message: '邮箱长度5-30位',
          trigger: 'trigger',
        },
      ]
    },
    inw = ref(0)

;
// 登录
async function lSubmit() {
  try {
    await lF.value.validate()
    login({...lForm.value}).then((r:any)=>{
      ElMessage({type: 'success', message: '登录成功！',duration:1500})
      sessionStorage.setItem('Authorization', r['token'])
      router.push('/').catch(() => true)
    })
  }catch (e) {}
}
// 注册
async function prSubmit() {
  try {
    await qrF.value.validate()
    const qr = {...qrForm.value}
    if (qr.password != qr.subPassword){
      ElMessage({type:'error',duration:1500,message:'密码不一致！'})
      return
    }
    regrpt(qr).then(()=>{
      ElMessage({type: 'success', message: '注册成功！',duration:1500})
    })
  }catch (e) {}
}
// 忘记
async function fpSubmit() {
  try {
    await fpF.value.validate()
    const fp = {...fpForm.value}
    if (fp.password != fp.newPassword){
      ElMessage({type:'error',duration:1500,message:'密码不一致！'})
      return
    }
    forgt(fp).then(()=>{
      ElMessage({type: 'success', message: '密码修改成功！',duration:1500})
    })
  }catch (e) {}
}
function inS(s:boolean) {
  inw.value = s ? (inw.value == 0 || inw.value == 1 ? -1 : 0) : (inw.value == -1 || inw.value == 0 ? 1 : 0)
}
</script>

<template>
  <div style="overflow: hidden;height: 100%;width: 100%;display: flex;">
    <el-image src="./login-bg.png" style="height: 100%;width: 100%;z-index: -1;"/>
    <div class="login-container">
      <div style="margin: 0 auto; width: 30px;height: 30px;">
        <el-image src="./Logo.svg"/>
      </div>
      <!-- 主标题 -->
      <h3 class="title">旅游网站</h3>
      <!-- 副标题 -->
      <h5 class="subtitle" v-if="inw == 0">欢迎登录</h5>
      <!-- 登录表单 -->
      <el-form v-if="inw == 0" :rules="lRules" :model="lForm" ref="lF">
        <!-- 账号输入 -->
        <el-form-item prop="username">
          <label for="account">账号</label>
          <el-input v-model="lForm.username" placeholder="请输入账号"/>
        </el-form-item>
        <!-- 密码输入 -->
        <el-form-item prop="password">
          <label for="account">密码</label>
          <el-input v-model="lForm.password" clearable placeholder="请输入密码" show-password type="password"/>
        </el-form-item>
        <!-- 登录按钮 -->
        <el-button class="login-btn" @click="lSubmit">登录</el-button>
      </el-form>
      <!-- 注册表单 -->
      <el-form v-else-if="inw == -1" :rules="qrRules" :model="qrForm" ref="qrF">
        <!-- 账号输入 -->
        <el-form-item prop="username">
          <label for="account">账号</label>
          <el-input v-model="qrForm.username" placeholder="请输入账号"/>
        </el-form-item>
        <!-- 密码输入 -->
        <el-form-item prop="password">
          <label for="account">密码</label>
          <el-input v-model="qrForm.password" clearable placeholder="请输入密码" show-password type="password"/>
        </el-form-item>
        <el-form-item prop="subPassword">
          <label for="account">确认密码</label>
          <el-input v-model="qrForm.subPassword" clearable placeholder="请输入确认密码" show-password type="password"/>
        </el-form-item>
        <el-form-item prop="nickname">
          <label for="account">用户名称</label>
          <el-input v-model="qrForm.nickname" placeholder="请输入用户名称"/>
        </el-form-item>
        <el-form-item prop="mail">
          <label for="account">绑定邮箱</label>
          <el-input v-model="qrForm.mail" placeholder="请输入邮箱"/>
        </el-form-item>
        <el-button class="login-btn" @click="prSubmit">立即注册</el-button>
      </el-form>
      <!-- 忘记表单 -->
      <el-form v-else :rules="fpRules" :model="fpForm" ref="fpF">
        <!-- 账号输入 -->
        <el-form-item prop="username">
          <label for="account">账号</label>
          <el-input v-model="fpForm.username" placeholder="请输入账号"/>
        </el-form-item>
        <!-- 邮箱输入 -->
        <el-form-item prop="mail">
          <label for="account">绑定邮箱</label>
          <el-input v-model="fpForm.mail" placeholder="请输入邮箱"/>
        </el-form-item>
<!--        <el-form-item prop="username">-->
<!--          <label for="account">验证码</label>-->
<!--          <el-input v-model="fpForm.username" placeholder="请输入验证码">-->
<!--            <template #append>-->
<!--              <el-button @click="fpSubmit" style="background: #037081;color: white;">获取验证码</el-button>-->
<!--            </template>-->
<!--          </el-input>-->
<!--        </el-form-item>-->
        <!-- 密码输入 -->
        <el-form-item prop="password">
          <label for="account">新密码</label>
          <el-input v-model="fpForm.password" clearable placeholder="请输入新密码" show-password type="password"/>
        </el-form-item>
        <el-form-item prop="newPassword">
          <label for="account">确认密码</label>
          <el-input v-model="fpForm.newPassword" clearable placeholder="请输入确认密码" show-password type="password"/>
        </el-form-item>
        <!-- 登录按钮 -->
        <el-button class="login-btn" @click="fpSubmit">确定</el-button>
      </el-form>
      <!-- 分隔线 -->
      <div class="divider">
        <span class="divider-line"></span>
        <span class="divider-text">OR</span>
        <span class="divider-line"></span>
      </div>
      <!-- 辅助操作 -->
      <button class="link-btn" @click="inS(true)">{{inw == 1 || inw == 0 ? '快速注册':'快速登录'}}</button>
      <button class="link-btn" @click="inS(false)">{{inw == -1 || inw == 0 ? '忘记密码':'快速登录'}}</button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.login-container {
  position: absolute;
  right: 17%;
  top: 10%;
  width: 320px;
  padding: 24px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.title {
  color: #2d3a4b;
  text-align: center;
  margin-bottom: 8px;
  margin-top: 5px;
}

.subtitle {
  color: #8898aa;
  text-align: center;
  margin-bottom: 32px;
}

label {
  display: block;
  margin-bottom: 8px;
  color: #2d3a4b;
  font-size: 14px;
}

.login-btn, .link-btn {
  width: 100%;
  height: 40px;
  background: #037081;
  color: white;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  transition: opacity 0.3s;
}

.login-btn:hover, .link-btn:hover {
  opacity: 0.9;
}

.link-btn {
  background-color: white;
  border: 1px solid #2d3a4b;
  margin-top: 10px;
  color: #2d3a4b;
}

.divider {
  display: flex;
  align-items: center;
  margin: 15px 0 10px 0;

  .divider-line {
    flex: 1;
    height: 1px;
    background: #dcdfe6;
  }

  .divider-text {
    padding: 0 12px;
    color: #8898aa;
    font-size: 12px;
  }
}

</style>
